ZendeskとShopifyを連携させて、Zendesk上でShopifyの注文を操作してみた

#Zendesk

#Shopify

酒匂祐也

2021.06.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

コンタクトセンターアプリケーションの理想は、1つの画面上で対応に必要な情報を参照でき、操作も行えることです。

コンタクト履歴の検索や登録、顧客検索（コンタクト履歴が顧客に紐づいてる場合）、電話操作画面など、最低限必要なもの以外にコンタクトセンターで取り扱う業務特有の機能を提供する画面も必要になってきます。その場合、Zendeskのようなコンタクト管理システムをメインに開発していくのか？それとも業務システムをメインにしてコンタクト履歴機能や電話操作画面などを開発していくのか？といったことを毎回考えることになります。

どちらの画面をメインにするのかはケースバイケースであると感じておりますが、ShopifyとZendeskを使用している環境の場合は、Shopifyアプリを活用してZendesk側にShopifyの注文管理機能を組み込むという選択肢がございます。

今回はそれを行うためのセットアップから動作確認までやってみました。

Shopifyアプリ (Zendesk) のインストール

Shopifyの管理画面にログインした状態で下記へアクセスします。

https://apps.shopify.com/zendesk?locale=ja

アプリ管理 > アプリを探す から検索ボックスに zendesk と入力する方法でも結構です。

アプリを追加するボタンを押します。

確認画面が出るので アプリをインストール を押します。

Shopifyと連携させるZendesk環境のサブドメインを入力し、 Submit を押します。

Zendesk環境へのログインが求められたら、ログインします。

Zendeskの画面に移動します。任意のコネクション名を入力して、 接続 を押します。

その後、下記画面が表示されたら、 アプリを更新する を押します。

Zendeskの管理画面の インテグレーション > Shopify に接続したShopify情報が表示されていればShopifyアプリのインストール完了です。

Shopifyの管理画面の アプリ管理 にZendeskが表示されていることも確認しておきます。

Zendeskの管理画面の インテグレーション > Shopify > {{設定したコネクション名}} > Web Widget を選択して、 Web Widgetを有効にする にチェックをつけて保存します。

Support設定 のリンクから移動できますが、Zendesk Supportの管理画面の 設定 > ウィジェット > {{設定対象のウィジェット}} を選択して 設定 タブにあるソースコードをコピーしておきます。このあとShopifyのテーマテンプレートファイルに貼り付けます。

Shopifyの管理画面を開き、 販売チャネル > オンラインストア > テーマ を選択します。 現在のテーマ の アクション > コードを編集する を選択し、 theme.liquid を開いて </body> タグの上に吐きほどコピーしたZendesk Support Widgetのタグを貼り付けます。保存するボタンを押して保存します。

Shopifyサイトを表示します。ページの右下にウィジェットが表示されております。

Shopifyのサイト上からサポートチケットを起票できるので、入力して送信してみます。

送信結果を確認してみます。

Zendesk Support上にチケットが登録されております。

リクエスタが入力したメールアドレス、Web Widget経由でチケットが起票されております。

ここはZendesk内の話ですが、チケットに返信するとリクエスタのメアドにメール通知が届いております。

Zendesk Support用サイドバーアプリを有効にする

Zendeskの管理画面の インテグレーション > Shopify > {{設定したコネクション名}} > サイドバーアプリ を選択して、 Support用サイドバーアプリ の 設定 をクリックします。

インストール をクリックします。

サイドバーアプリ と 返金とキャンセル にチェックをつけて、 保存 をクリックします。

チケット画面（ここでは新規登録）を開き、右側のアプリバーを展開すると、 Shopifyの {{設定したコネクション名}} が見出しになっているアプリ画面が出てきます。

Shopifyから注文情報を取得する条件は下記です。

https://support.zendesk.com/hc/ja/articles/360054030413 より

Supportでは、インテグレーションにShopifyの注文情報を取得させるには、チケットリクエスタのメールアドレスまたは電話番号と、Shopifyの注文およびアカウントのメールアドレスまたは電話番号を一致させる必要があります。Chatでは、訪問者がメールアドレスまたは電話番号を提供した場合、Shopifyにその訪問者と同じメールアドレスまたは電話番号が見つかれば、注文情報が取得されます。

動作確認をしていてハマったのは、エイリアスのメールアドレスだと注文情報を取得できませんでした。